@import '../../var.less';
@tablePrefixCls        : vcu-table;

.@{tablePrefixCls}-bordered {
  border      : 1px solid @table-border-color;
  border-right: 0;

  tr {

    th,
    td {
      border-right: 1px solid @table-border-color;
    }

  }
}

.@{tablePrefixCls}-fixed {
  // 设置过宽度的列的固定宽度
  table-layout   : fixed;
  border-collapse: separate;
  border-spacing : 0;
}


.@{tablePrefixCls}-title,
.@{tablePrefixCls}-footer {
  padding   : @table-padding-vertical;
  color     : rgba(0, 0, 0, .85);
  text-align: left;
}

.@{tablePrefixCls}-title {
  border-radius: @table-border-radius @table-border-radius 0 0;
  border-bottom: 1px solid @table-border-color;
}

.@{tablePrefixCls}-footer {
  background   : @table-common--bg-color;
  border-radius: 0 0 @table-border-radius @table-border-radius;
  // border-top: 1px solid @table-border-color;
}

.@{tablePrefixCls}-thead th,
.@{tablePrefixCls}-tbody td {
  padding      : @table-padding-vertical;
  overflow-wrap: break-word;
  border-bottom: 1px solid @table-border-color;
}

.@{tablePrefixCls}-tbody {
  tr {
    &:last-child {
      td {
        border-bottom: 0;
      }
    }
  }
}

.@{tablePrefixCls}-thead tr th {
  color           : rgba(0, 0, 0, .85);
  font-weight     : 600;
  font-size       : 14px;
  background      : @table-common--bg-color;
  border-bottom   : 1px solid @table-border-color;
  background-color: rgb(247, 247, 247);
}

.@{tablePrefixCls}-body table,
.@{tablePrefixCls}-row {
  width          : 100%;
  text-align     : left;
  border-collapse: separate;
  border-spacing : 0;

  td {
    background-color: #fff;
  }
}

.@{tablePrefixCls}-cell-ellipsis {
  overflow-wrap: break-word;
  overflow     : hidden;
  white-space  : nowrap;
  text-overflow: ellipsis;
}

.@{tablePrefixCls}-row-cell-break-word {
  word-wrap : break-word;
  word-break: break-word;
}



// 选择框列样式
.@{tablePrefixCls}-wrapper colgroup .@{tablePrefixCls}-selection-col {
  width: 60px;
}

// 选中行tr
.@{tablePrefixCls}-row-selected td {
  color     : inherit;
  background: #e6f7ff;
}


// expandIcon样式
.@{tablePrefixCls}-row-expand-icon {
  margin-right       : 8px;
  color              : #1890ff;
  text-decoration    : none;
  cursor             : pointer;
  transition         : color 0.3s;
  display            : inline-block;
  width              : 17px;
  height             : 17px;
  color              : inherit;
  line-height        : 17px;
  text-align         : center;
  background         : #fff;
  border             : 1px solid #e8e8e8;
  border-radius      : @table-border-radius;
  outline            : none;
  transition         : all 0.3s;
  -webkit-user-select: none;
  -moz-user-select   : none;
  -ms-user-select    : none;
  user-select        : none;
}

.@{tablePrefixCls}-row-expand-icon:focus,
.@{tablePrefixCls}-row-expand-icon:hover {
  color: #40a9ff;
}

.@{tablePrefixCls}-row-expand-icon:active {
  color: #096dd9;
}

.@{tablePrefixCls}-row-expand-icon:focus,
.@{tablePrefixCls}-row-expand-icon:hover,
.@{tablePrefixCls}-row-expand-icon:active {
  border-color: currentColor;
}

.@{tablePrefixCls}-row-expand-icon-collapsed::after {
  content: '-';
}

.@{tablePrefixCls}-row-expand-icon-expanded::after {
  content: '+';
}


// 可展开控制列
.@{tablePrefixCls}-expand-icon-th,
.@{tablePrefixCls}-row-expand-icon-cell {
  width     : 50px;
  min-width : 50px;
  text-align: center;
}


// 增加一级.@{tablePrefixCls}-body选择器提高样式优先级防止被自定义样式覆盖
.@{tablePrefixCls}-tbody .@{tablePrefixCls}-row.@{tablePrefixCls}-row-hover {
  background: rgb(230, 237, 255);
}

// 展开行
.@{tablePrefixCls}-expanded-row {
  background: #fbfbfb;
}


// 排序图标样式
.@{tablePrefixCls}-column-sorters {
  display        : flex;
  justify-content: center;
  // 防止点击排序图标时出现其他th文本高亮情况
  user-select    : none;
}

.@{tablePrefixCls}-column-sorter {
  color         : #bfbfbf;
  margin-left   : 6px;
  cursor        : pointer;
  display       : flex;
  flex-direction: column;
}

.anticon-caret-up {
  position: relative;
}

.anticon-caret-down {
  position: relative;
  top     : -4px;
}

.anticon.on {
  color: #1890ff;
}


// 复杂dom表格容器
.@{tablePrefixCls}-content {
  position: relative;
  clear   : both;
}

// 固定列相关样式
// 给子table dom设置宽度
.body-wrapper-body-wrapper {
  overflow: auto;
}

.@{tablePrefixCls}.@{tablePrefixCls}-scroll-position-left .@{tablePrefixCls}-fixed-left {
  box-shadow: none;
}

.@{tablePrefixCls}-fixed-left,
.@{tablePrefixCls}-fixed-left table {
  border-radius: @table-border-radius 0 0 0;
}

.@{tablePrefixCls}-fixed-left {
  left         : 0;
  box-shadow   : 6px 0 6px -4px rgba(0, 0, 0, 0.15);
  // box-shadow: 6px 0 6px -4px rgb(0 0 0 / 15%;
}

.@{tablePrefixCls}-fixed-right {
  right        : 0;
  box-shadow   : -6px 0 6px -4px rgba(0, 0, 0, 0.15);
  // box-shadow: 6px 0 6px -4px rgb(0 0 0 / 15%;
}

.@{tablePrefixCls}-fixed-left,
.@{tablePrefixCls}-fixed-right {
  position     : absolute;
  top          : 0;
  z-index      : 1;
  overflow     : hidden;
  border-radius: 0;
  transition   : box-shadow .3s ease;
  background   : #fff;
}

.@{tablePrefixCls}-scroll-position-left .@{tablePrefixCls}-fixed-left {
  box-shadow: none;
}

.@{tablePrefixCls}-scroll-position-right .@{tablePrefixCls}-fixed-right {
  box-shadow: none;
}

.@{tablePrefixCls}-header-wrapper {
  overflow-x: auto;

  table {
    text-align     : left;
    border-collapse: separate;
    border-spacing : 0;
  }

  // 只设置宽度的话还会有样式问题（还是占位置），必须用容器包裹才行
  // &::-webkit-scrollbar { width: 0 !important }
  &::-webkit-scrollbar {
    // 使用display:none可以实现隐藏滚动条，同时又不占位置，还可以滚动
    display: none;
  }
}

// 不隐藏右侧导航栏的滚动条，右侧需要显示竖向滚动条
.@{tablePrefixCls}-fixed-left .@{tablePrefixCls}-body-inner {
  &::-webkit-scrollbar {
    display: none;
  }
}

// 固定列右侧可能会多出一块
.@{tablePrefixCls}-fixed-right .@{tablePrefixCls}-thead {
  background: @table-common--bg-color;
}


// 空数据样式
.@{tablePrefixCls}-empty {
  padding        : 24px 0;
  display        : flex;
  justify-content: center;
  align-items    : center;
  border         : 1px solid @table-border-color;
  border-top     : none;
}

.@{tablePrefixCls}-empty-text {
  color        : rgba(0, 0, 0, .45);
  margin-bottom: 0;
}